import { Typography } from "antd";
import React from "react";
import commonStyles from "./common.module.scss";

type PropsType = {
  text: string;
  level: number;
  isCenter: boolean;
};

const QuestionTitle: React.FC<PropsType> = ({ text, level, isCenter }) => {
  const style: React.CSSProperties = { padding: "10px 0" };
  if (isCenter) style.textAlign = "center";
  switch (level) {
    case 1:
      style.fontSize = "36px";
      return (
        <Typography.Title level={1} style={style}>
          {text}
        </Typography.Title>
      );
    case 2:
      style.fontSize = "30px";
      return (
        <Typography.Title level={2} style={style}>
          {text}
        </Typography.Title>
      );
    case 3:
      style.fontSize = "24px";
      return (
        <Typography.Title level={3} style={style}>
          {text}
        </Typography.Title>
      );
    case 4:
      style.fontSize = "18px";
      return (
        <Typography.Title level={4} style={style}>
          {text}
        </Typography.Title>
      );
    default:
      style.fontSize = "16px";
      return (
        <Typography.Title level={5} style={style} className={commonStyles.h5}>
          {text}
        </Typography.Title>
      );
  }
};

export default QuestionTitle;
